<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrapper {
            width: 400px;
            height: 400px;
            position: relative;
            margin: 50px auto;
            /* border: 1px solid #ccc; */
        }
        .wrapper>div {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .numbers div {
            transition: .7s;
        }
        .numbers div:hover {
            background-color: #ccc;
            color: #fff;
        }
        .mask {
            -webkit-mask-size: 108px 108px;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-image: radial-gradient(circle, #fff, transparent 54px);
            -webkit-mask-position: 0px 0px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="grid mask"></div>
        <div class="numbers"></div>
    </div>
    <script src="../js/event.js"></script>
    <script>
        const gridContanier = document.querySelector('.grid');
        const numbersContanier = document.querySelector('.numbers');
        const col = 10, row = 10;
        render(numbersContanier, (target, index, jndex) => {
            // index jndex (index * row) + jndex
            target.innerHTML = (index * row) + jndex + 1;
             target.style.boxSizing = 'border-box ';
             target.style.margin = '2px';
             target.style.width = 400 / row - 4 + 'px';
             target.style.height = 400 / col - 4 + 'px';
        })
        render(gridContanier, (target, index) => {
            target.style.border = '1px solid #ccc';
            target.style.boxSizing = 'border-box ';
            target.style.margin = '2px';
            target.style.width = 400 / row - 4 + 'px';
            target.style.height = 400 / col - 4 + 'px';
        })
        function render(target, cb){
            for (let index = 0; index < row; index++) {
                for (let jndex = 0; jndex < col; jndex++) {
                    const div = document.createElement('div');
                    div.setAttribute('row', index);
                    div.setAttribute('col', jndex);
                    div.style.float = 'left';
                    div.style.width = 400 / row + 'px';
                    div.style.height = 400 / col + 'px';
                    div.style.textAlign = 'center';
                    div.style.lineHeight = 400 / col + 'px';
                    cb.call(null, div, index, jndex);
                    target.appendChild(div);
                }
            }
        }

        ev.delegate(numbersContanier, 'mousemove', '.numbers>div', function(ev){
            // 0 0 row * 36px - 36px
            // -36px -36px
            const row = ev.target.getAttribute('row'), col = ev.target.getAttribute('col');
            gridContanier.style.webkitMaskPosition = `${((col-1) * 36) + 18}px ${((row-1) * 36) + 18}px`
            // console.log(ev.target.getAttribute('row'), ev.target.getAttribute('col'));
        })
        
    </script>
</body>
</html>